<template>
  <div class="show">
    <div class="close" @click="onCloseClick">
      <el-icon><Close /></el-icon>
    </div>
    <div class="image">
      <img :src="getImageUrl(url)" alt="" />
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

// 图片路径处理
const name = route.params.name;
const url = `../../assets/img/${name}`;
const getImageUrl = (url) => {
  return new URL(url, import.meta.url).href;
};

// 事件监听函数
function onCloseClick() {
  router.back();
}
</script>

<style lang="less" scoped>
.show {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);

  .close {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #fff;
    font-size: 60px;
    cursor: pointer;
  }

  .image {
    width: 700px;
    margin: 0 auto;
    padding-top: 80px;

    img {
      width: 100%;
    }
  }
}
</style>
